var log = console.log.bind(console);
//读取图片路径
var imageFromPath = function(Path) {
	var img = new Image();
	img.src = Path;
	return img;
}

var clock = document.getElementById("clock");
var cxt = clock.getContext('2d');

// 屏幕的设备像素比
var devicePixelRatio = window.devicePixelRatio || 1;

// 浏览器在渲染canvas之前存储画布信息的像素比
var backingStoreRatio = cxt.webkitBackingStorePixelRatio ||
	cxt.mozBackingStorePixelRatio ||
	cxt.msBackingStorePixelRatio ||
	cxt.oBackingStorePixelRatio ||
	cxt.backingStorePixelRatio || 1;

// canvas的实际渲染倍率
var ratio = devicePixelRatio / backingStoreRatio;
clock.style.width = clock.width;
clock.style.height = clock.height;

clock.width = clock.width * ratio;
clock.height = clock.height * ratio;

img = imageFromPath('img/black_08.png')
//把表盘画上去
cxt.drawImage(img, 0, 0, 120, 120);

function drawclock() {
	//清除画布
	cxt.clearRect(0, 0, 500, 500);
	var now = new Date();
	var sec = now.getSeconds();
	var min = now.getMinutes();
	var hour = now.getHours();
	hour = hour + min / 60;
	//将小时转换为12小时
	hour = hour > 12 ? hour - 12 : hour;
	cxt.drawImage(img, 0, 0, 120* ratio, 120* ratio);
	//表盘
	//	cxt.beginPath();
	//	cxt.lineWidth = 0;
	//	cxt.strokeStyle = "rgb(39,39,39)";
	////	cxt.arc(250, 250, 200, 0, 360, false);
	//	cxt.arc(50, 50, 45, 0, 360, false);
	//	cxt.stroke();
	//	cxt.closePath();

	//刻度
	//时刻度
//	for(var i = 0; i < 12; i++) {
//		cxt.save();
//		cxt.lineWidth = 7;
//		cxt.strokeStyle = "white";
//		cxt.translate(25, 25); //设置0，0点
//		cxt.rotate(i * 30 * Math.PI / 180);
//		cxt.beginPath();
//		cxt.moveTo(0, -170);
//		cxt.lineTo(0, -190);
//		cxt.closePath();
//		cxt.stroke();
//		cxt.restore();
//	}
	//分刻度
//	for(var i = 0; i < 60; i++) {
//		cxt.save();
//		cxt.lineWidth = 3;
//		cxt.strokeStyle = "white";
//		cxt.translate(250, 250);
//		cxt.rotate(i * 6 * Math.PI / 180);
//		cxt.beginPath();
//		cxt.moveTo(0, -180);
//		cxt.lineTo(0, -190);
//		cxt.closePath();
//		cxt.stroke();
//		cxt.restore();
//	}

	//时针
	//设置时针风格
	cxt.save();
	cxt.lineWidth = 1* ratio;
	cxt.beginPath();
	cxt.strokeStyle = "black";
	cxt.translate(60* ratio, 60* ratio);
	cxt.rotate(hour * 30 * Math.PI / 180);
	cxt.beginPath();
	cxt.moveTo(0, -28* ratio);
	cxt.lineTo(0, 10* ratio);
	cxt.closePath();
	cxt.stroke();
	cxt.restore();

	//分针
	cxt.save();
	cxt.lineWidth = 1* ratio;
	cxt.beginPath();
	cxt.strokeStyle = "black";
	cxt.translate(60* ratio, 60* ratio);
	cxt.rotate(min * 6 * Math.PI / 180);
	cxt.beginPath();
	cxt.moveTo(0, -36* ratio);
	cxt.lineTo(0, 10* ratio);

	cxt.closePath();
	cxt.stroke();
	cxt.restore();
	//秒针
	cxt.save();
	cxt.lineWidth = 1* ratio;
	cxt.beginPath();
	cxt.strokeStyle = "red";
	cxt.translate(60* ratio, 60* ratio);
	cxt.rotate(sec * 6 * Math.PI / 180);
	cxt.beginPath();
	cxt.moveTo(0, -37* ratio);
	cxt.lineTo(0, 10* ratio);
	cxt.closePath();
	cxt.stroke();
	//画出时针，分针，秒针交叉点
	cxt.beginPath();
	cxt.fillStyle = "red";
	cxt.strokeStyle = "red";
	cxt.arc(0, 0, 5, 0, 360, false);
	cxt.fill();
	cxt.closePath();
	cxt.stroke();

	//	cxt.beginPath();
	//	cxt.fillStyle = "gray";
	//	cxt.strokeStyle = "red";
	//	cxt.arc(0, -140, 5, 0, 360, false);
	//	cxt.fill();
	//	cxt.closePath();
	//	cxt.stroke();
	cxt.restore();
}
drawclock();
//实验setINterval
setInterval(drawclock, 1000);
//黑色

var BlackClock = document.getElementById("BlackClock");
var cxt1 = BlackClock.getContext('2d');

BlackClock.style.width = BlackClock.width;
BlackClock.style.height = BlackClock.height;

BlackClock.width = BlackClock.width * ratio;
BlackClock.height = BlackClock.height * ratio;

img2 = imageFromPath('img/black_08.png')
//把表盘画上去
cxt1.drawImage(img2, 0, 0, 120, 120);

function drawBlackclock() {
	//清除画布
	cxt1.clearRect(0, 0, 500, 500);
	var now = new Date();
	var sec = now.getSeconds();
	//	var min = now.getMinutes();
	//	var hour = now.getHours();
	var min = biliMin;
	var hour = biliHour;
	hour = hour + min / 60;
	//将小时转换为12小时
	hour = hour > 12 ? hour - 12 : hour;
//
//	log('hour :' + hour);
//	log('sec :' + sec);
//	log("min:" + min);
	cxt1.drawImage(img2, 0, 0, 120* ratio, 120* ratio);
	//表盘
	//	cxt1.beginPath();
	//	cxt1.lineWidth = 1;
	//	cxt1.strokeStyle = "#232323";
	////	cxt.arc(250, 250, 200, 0, 360, false);
	//	cxt1.arc(50, 50, 45, 0, 360, false);
	//	cxt1.stroke();
	//	cxt1.closePath();

	//刻度
	//时刻度
//	for(var i = 0; i < 12; i++) {
//		cxt1.save();
//		cxt1.lineWidth = 7;
//		cxt1.strokeStyle = "white";
//		cxt1.translate(25, 25); //设置0，0点
//		cxt1.rotate(i * 30 * Math.PI / 180);
//		cxt1.beginPath();
//		cxt1.moveTo(0, -170);
//		cxt1.lineTo(0, -190);
//		cxt1.closePath();
//		cxt1.stroke();
//		cxt1.restore();
//	}
	//分刻度
//	for(var i = 0; i < 60; i++) {
//		cxt1.save();
//		cxt1.lineWidth = 3;
//		cxt1.strokeStyle = "white";
//		cxt1.translate(250, 250);
//		cxt1.rotate(i * 6 * Math.PI / 180);
//		cxt1.beginPath();
//		cxt1.moveTo(0, -180);
//		cxt1.lineTo(0, -190);
//		cxt1.closePath();
//		cxt1.stroke();
//		cxt1.restore();
//	}

	//时针
	//设置时针风格
	cxt1.save();
	cxt1.lineWidth = 2* ratio;
	cxt1.beginPath();
	cxt1.strokeStyle = "#fff";
	cxt1.translate(60* ratio, 60* ratio);
	cxt1.rotate(hour * 30 * Math.PI / 180);
	cxt1.beginPath();
	cxt1.moveTo(0, -28* ratio);
	cxt1.lineTo(0, 12* ratio);
	cxt1.closePath();
	cxt1.stroke();
	cxt1.restore();

	//分针
	cxt1.save();
	cxt1.lineWidth = 2* ratio;
	cxt1.beginPath();
	cxt1.strokeStyle = "#C2C1B1";
	cxt1.translate(60* ratio, 60* ratio);
	cxt1.rotate(min * 6 * Math.PI / 180);
	cxt1.beginPath();
	cxt1.moveTo(0, -35* ratio);
	cxt1.lineTo(0, 12* ratio);

	cxt1.closePath();
	cxt1.stroke();
	cxt1.restore();
	//秒针
	//	cxt1.save();
	//	cxt1.lineWidth = 1;
	//	cxt1.beginPath();
	//	cxt1.strokeStyle = "#C2C1B1";
	//	cxt1.translate(60, 60); 
	//	cxt1.rotate(sec * 6 * Math.PI / 180);
	//	cxt1.beginPath();
	//	cxt1.moveTo(0, -37);
	//	cxt1.lineTo(0, 12);
	//	cxt1.closePath();
	//	cxt1.stroke();
	//画出时针，分针，秒针交叉点
	//	cxt1.beginPath();
	//	cxt1.fillStyle = "red";
	//	cxt1.strokeStyle = "red";
	//	cxt1.arc(0, 0, 3, 0, 360, false);
	//	cxt1.fill();
	//	cxt1.closePath();
	//	cxt1.stroke();

	//	cxt.beginPath();
	//	cxt.fillStyle = "gray";
	//	cxt.strokeStyle = "red";
	//	cxt.arc(0, -140, 5, 0, 360, false);
	//	cxt.fill();
	//	cxt.closePath();
	//	cxt.stroke();
	cxt1.restore();
}
drawBlackclock(biliMin, biliHour);
//实验setINterval
setInterval(drawBlackclock, 1000);